<template>
  <!-- 文章头部 -->
  <div class="article-header">
    <img v-if="news?.frontCover != null" :src=news?.frontCover class="article-cover" alt="文章封面">
    <div v-else class="article-cover"></div>

    <!-- 导航栏 -->
    <div class="nav-bar">

      <div class="nav-left">
        <!-- 返回按钮 -->
        <div class="back-button" @click="goBack()">
          <svg t="1743402074255" class="backIcon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="2913" width="32" height="32">
            <path
              d="M739.555556 198.599111L412.842667 525.312 739.555556 852.024889l-84.821334 84.764444-411.534222-411.477333L654.791111 113.777778z"
              :fill="news?.frontCover != null ? '#fff' : '#000' " p-id="2914">
            </path>
          </svg>
        </div>
      </div>

      <div class="nav-title"></div>

      <div class="nav-actions">
        <!-- 分享按钮 -->
        <a href="#">
          <svg t="1742197892282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="26221" width="32" height="32">
            <path
              d="M768.73106 703.537712c-35.606921 0-67.945574 14.793214-91.167479 38.359147l-309.109357-171.670082c9.116748-17.545439 14.621199-37.155048 14.621199-58.312783 0-12.55703-2.408198-24.426004-5.676466-35.950949l304.63699-189.215522c22.705863 20.469679 52.464304 33.198723 85.146985 33.198723 70.525785 0 127.978498-57.452713 127.978498-127.978498S837.708718 63.989249 767.182933 63.989249s-127.978498 57.452713-127.978498 127.978498c0 14.621199 2.92424 28.382328 7.396607 41.455401L344.716278 420.746514c-23.049891-22.705863-54.700487-36.983034-89.791366-36.983034-70.525785 0-127.978498 57.452713-127.978498 127.978498s57.452713 127.978498 127.978498 127.978498c25.630102 0 49.540064-7.740635 69.493701-20.813707l321.150344 178.378633c-3.096254 11.008903-5.160423 22.18982-5.160423 34.058794 0 70.525785 57.452713 127.978498 127.978498 127.978498s127.978498-57.452713 127.978498-127.978498S839.256845 703.537712 768.73106 703.537712zM767.182933 127.978498c35.262893 0 63.989249 28.726356 63.989249 63.989249s-28.726356 63.989249-63.989249 63.989249-63.989249-28.726356-63.989249-63.989249S731.92004 127.978498 767.182933 127.978498zM191.107677 511.913993c0-35.262893 28.726356-63.989249 63.989249-63.989249s63.989249 28.726356 63.989249 63.989249-28.726356 63.989249-63.989249 63.989249S191.107677 547.176886 191.107677 511.913993zM768.73106 895.505459c-35.262893 0-63.989249-28.726356-63.989249-63.989249s28.726356-63.989249 63.989249-63.989249 63.989249 28.726356 63.989249 63.989249C832.720309 866.951117 803.993953 895.505459 768.73106 895.505459z"
              :fill="news?.frontCover != null ? '#ffffff' : '#000'" p-id="26222"></path>
          </svg>
        </a>
      </div>

    </div>

    <!-- 文章标题 -->
    <div class="article-overlay">
      <!-- <div class="article-title">全球科技峰会在上海开幕，多国领导人出席并发表演讲</div> -->
      <div class="article-title">{{ news?.title }}</div>
      <div class="article-meta">
        <span>{{ route.query.newsCategoryName }}频道</span>
        <span>{{ formatDate(news?.publishTime) }}</span>
        <!-- <div>2023-06-15 10:30</div> -->
      </div>
    </div>

  </div>

  <!-- 文章内容 -->
  <div v-html="news?.content" class="article-content editor-content-view"></div>

  <!-- 文章操作 -->
  <div class="article-actions">
    <div class="article-action">
      <div class="article-action-icon" @click="likeNews()">
        <svg v-if="news?.isLike == true" t="1744958201963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5449" width="32" height="32">
          <path d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z" 
            fill="#E5404F" p-id="5450"></path>
        </svg>
        <svg v-else t="1742197400927" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13390" width="32" height="32">
          <path d="M523.3408 232.192l-5.7344 4.7104-5.888 5.1456-3.5072-3.1744a230.912 230.912 0 0 0-39.8592-27.8016c-55.6544-30.8224-121.7024-36.736-195.328-8.192-93.0304 36.0448-148.8896 139.52-130.8672 254.3872 20.6592 131.584 130.304 261.4784 327.3984 367.8208 12.7488 6.8608 25.216 10.8032 36.5312 11.9296l3.3024 0.256 2.2272 0.0512c13.44-0.4352 27.52-4.4544 41.984-12.2368 197.12-106.3424 306.7648-236.2624 327.424-367.8208 18.0224-114.8928-37.8368-218.3424-130.8672-254.3872-86.7072-33.6128-161.6128-19.456-220.672 24.576l-6.144 4.7616z m203.6992 30.3616c64.256 24.9088 104.192 98.944 90.752 184.8064-17.2032 109.5168-113.664 223.7952-294.5536 321.3824l-2.8672 1.4592a34.8672 34.8672 0 0 1-8.576 2.9952l-0.3584 0.0512a39.168 39.168 0 0 1-11.4944-4.5056c-180.9152-97.5872-277.376-211.8656-294.5536-321.3824-13.4656-85.8624 26.496-159.8976 90.752-184.8064 55.4496-21.504 101.7344-17.3568 141.184 4.5056a161.7408 161.7408 0 0 1 36.2496 27.4432c5.0432 5.0688 8.6016 9.2416 10.6496 11.9552l27.1872 39.1936 26.368-37.6064c1.2288-1.7152 3.4816-4.5824 7.168-8.6784 6.4-6.9888 14.0032-14.0288 22.8096-20.608 42.2912-31.5392 94.336-41.3696 159.2832-16.2048z"
            fill="#FB553C" p-id="13391"></path>
        </svg>
      </div>
      <div class="article-action-text">{{ news?.likeNum }}</div>
    </div>

    <div class="article-action">
      <div class="article-action-icon" @click="collectNews()">
        <svg v-if="news?.isFavorite == false" t="1742197425637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13644" width="32" height="32">
          <path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24zM551.786667 756.032l170.976 106.24c2.624 1.621333 5.717333 2.122667 8.650666 1.408 6.410667-1.557333 10.56-8.426667 8.928-15.424l-46.485333-198.24a77.141333 77.141333 0 0 1 24.277333-75.733333L870.293333 441.706667c2.485333-2.165333 4.053333-5.312 4.330667-8.746667 0.565333-7.136-4.490667-13.173333-10.976-13.696l-199.712-16.288a75.989333 75.989333 0 0 1-64.064-47.168l-76.938667-188.16a12.309333 12.309333 0 0 0-6.538666-6.741333c-5.898667-2.496-12.725333 0.373333-15.328 6.741333l-76.949334 188.16a75.989333 75.989333 0 0 1-64.064 47.168l-199.701333 16.288a11.68 11.68 0 0 0-7.978667 4.181333 13.226667 13.226667 0 0 0 1.333334 18.261334l152.16 132.586666a77.141333 77.141333 0 0 1 24.277333 75.733334l-46.485333 198.229333a13.333333 13.333333 0 0 0 1.514666 9.877333c3.488 5.792 10.581333 7.530667 16.064 4.128l170.986667-106.229333a75.296 75.296 0 0 1 79.562667 0z"
            fill="#f4ea2a" p-id="13645"></path>
        </svg>

        <svg v-else t="1745311416284" class="icon" viewBox="0 0 1033 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6338" width="32" height="32">
          <path d="M516.983467 890.88l-203.946667 107.2a106.666667 106.666667 0 0 1-154.752-112.426667L197.239467 658.56l-164.992-160.810667a106.666667 106.666667 0 0 1 59.114666-181.952l228.010667-33.130666 101.973333-206.592a106.666667 106.666667 0 0 1 191.296 0l101.973334 206.592 227.989333 33.130666a106.666667 106.666667 0 0 1 59.093333 181.952l-164.970666 160.810667 38.954666 227.072a106.666667 106.666667 0 0 1-154.773333 112.448L516.983467 890.88z" 
            fill="#FFB730" p-id="6339"></path>
        </svg>
      </div>
      <div class="article-action-text">{{ news?.favoriteNum }}</div>
    </div>

    <div class="article-action" @click="openEditCommentDialog">
      <div class="article-action-icon">
        <svg t="1742197473244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="14838" width="32" height="32">
          <path
            d="M481.578667 968.832l-157.909334-158.293333H85.418667A85.290667 85.290667 0 0 1 0 725.12L0.426667 128.042667C0.426667 80.768 38.4 42.666667 85.845333 42.666667h852.778667c47.189333 0 85.418667 38.101333 85.376 85.418666l-0.426667 597.12c0 47.146667-38.229333 85.333333-85.376 85.333334h-237.781333l-158.549333 158.293333a42.624 42.624 0 0 1-60.288 0z m456.704-243.712L938.666667 128.042667s-852.906667-0.128-852.906667 0.042666c0 0-0.384 597.077333-0.298667 597.077334H341.333333c11.306667 0 22.186667 4.48 30.165334 12.501333l140.330666 140.629333 140.8-140.672a42.624 42.624 0 0 1 30.165334-12.458666h255.488zM277.333333 512a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m234.666667 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m234.666667 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z"
            fill="#3D3D3D" p-id="14839"></path>
        </svg>
      </div>
      <div class="article-action-text">{{ comments.total }}</div>
    </div>

    <div class="article-action">
      <div class="article-action-icon">
        <svg t="1742197173620" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="8875" width="32" height="32">
          <path
            d="M842.629209 814.105572c0-66.74617-53.842279-120.858602-120.241548-120.858602-29.529547 0-56.212256 11.156084-77.159334 28.906353L406.945339 569.060577c9.151427-17.073864 14.845103-36.291554 14.845103-57.057507 0-18.901489-4.690836-36.556591-12.412704-52.483328l238.921531-155.092287c20.48966 16.247033 46.012963 26.324552 74.088392 26.324552 66.398246 0 120.241548-54.117548 120.241548-120.829949 0-66.74617-53.842279-120.858602-120.241548-120.858602s-120.225175 54.117548-120.225175 120.858602c0 16.471137 3.314489 32.190143 9.292644 46.493917l-239.941767 155.788136 2.583848 3.988848c-20.221554-15.481599-45.170782-25.028023-72.553433-25.028023-66.398246 0-120.224152 54.092989-120.224152 120.829949 0 66.74617 53.837162 120.840182 120.224152 120.840182 23.381523 0 44.977377-6.968715 63.434751-18.550495l245.198491 157.52264c-4.944616 13.180184-7.995091 27.347858-7.995091 42.292222 0 66.735937 53.837162 120.840182 120.224152 120.840182s120.275317-54.117548 120.275317-120.840182l0 0L842.629209 814.105572zM688.948061 260.07634l-24.490787-38.102806-0.832971 0.539282c-0.868787-4.085038-1.367137-8.315386-1.367137-12.628622 0-33.389458 26.926256-60.424184 60.124356-60.424184 33.209356 0 60.124356 27.034726 60.124356 60.424184 0 33.350572-26.912953 60.420091-60.124356 60.420091-12.382005 0.002047-23.856337-3.771907-33.42118-10.226922l0 0L688.948061 260.07634zM241.426585 511.980557c0-33.350572 26.912953-60.420091 60.110029-60.420091 33.217543 0 60.133565 27.04496 60.133565 60.420091 0 33.389458-26.912953 60.424184-60.133565 60.424184C268.341584 572.404742 241.426585 545.370015 241.426585 511.980557L241.426585 511.980557zM662.234653 814.105572c0-33.375132 26.926256-60.420091 60.124356-60.420091 33.209356 0 60.124356 27.034726 60.124356 60.420091 0 33.350572-26.912953 60.424184-60.124356 60.424184C689.163979 874.528734 662.234653 847.462285 662.234653 814.105572L662.234653 814.105572 662.234653 814.105572z"
            fill="#2c2c2c" p-id="8876"></path>
        </svg>
      </div>
      <div class="article-action-text">分享</div>
    </div>
  </div>

  <!-- 相关阅读 -->
  <div class="article-related">
    <div class="article-related-title">相关阅读</div>

    <div class="list-item" v-for="(item, index) in relatedArticles" :key="index" @click="navigateToNewsDetails(item)">
      <div class="list-item-content">
        <div class="list-item-title">{{ item.title }}</div>
        <div class="list-item-subtitle">{{ getNewsCategoriesName(item.categoryId) }} · {{ formatTimeAgo(item.publishTime) }}</div>
      </div>
      <img v-if="item.frontCover" :src="item.frontCover" width="80" height="60" style="border-radius: 6px; object-fit: cover;">
    </div>
  </div>

  <!-- 评论区 -->
  <div class="article-comments">
    <div class="article-comments-header">
      <div class="article-comments-title">评论</div>
      <div class="article-comments-count">{{ comments.total }}条评论</div>
    </div>

    <div class="article-comment" v-for="(comment, index) in comments.list" :key="comment.id">
      <img :src="comment.avatar" class="article-comment-avatar" alt="">
      <div class="article-comment-content">
        <div class="article-comment-header">
          <div class="article-comment-name">{{ comment.userName }}</div>
          <div class="article-comment-time">{{ formatTimeAgo(comment.createTime) }}</div>
        </div>
        <div class="article-comment-text" v-html="comment.content.replace(/(\r\n|\n|\r)/gm, '<br />')"></div>
        <div class="article-comment-actions">
          <!-- <div class="article-comment-action" @click="toggleCommentLike(index)">
            <i :class="['far fa-heart', { 'fas': comment.liked }]"></i> {{ comment.likes }}
          </div>
          <div class="article-comment-action">
            <i class="far fa-comment"></i> 回复
          </div> -->
          <div v-if="comment.userId == userStoreObject.userInfo.id" @click="handleClickEllipsis(comment)" class="article-comment-action" style="margin-left: auto;">
            <i class="fa-solid fa-ellipsis-vertical"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--隐藏的对话框-->
      <!--编辑评论对话框-->
  <el-dialog v-model="dialogCommentVisible" title="" width="90%" center align-center>
    <div style="text-align: center;font-size: 18px;margin-bottom: 10px;">编辑评论</div>
    <el-input v-model="UserCommentAddDTO.content" style="width: 100%" 
        :rows="2" type="textarea" maxlength="500" show-word-limit
        :autosize="{ minRows: 4, }" placeholder="请输入"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogCommentVisible = false">取消</el-button>
        <el-button type="primary" @click="submitComment()">发送</el-button>
      </div>
    </template>
  </el-dialog>

      <!--评论操作对话框-->
  <el-dialog v-model="dialogOperateCommentVisible" title="" width="100%" style="margin-bottom: 0;padding-bottom: 40px;"align-center>
    <el-card @click="confirmDeleteCommentVisible = true" style="margin-top: 20px;">
      <span style="display: flex;align-items: center;gap: 10px;">
        <el-icon><Delete /></el-icon>
        <p>删除</p>
      </span>
    </el-card>
  </el-dialog>
  
      <!--确认删除评论对话框-->
  <el-dialog v-model="confirmDeleteCommentVisible" title="警告" width="90%" center align-center>
    <div style="width: 100%;text-align: center;">评论删除后将不可恢复，是否继续？</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="confirmDeleteCommentVisible = false">取消</el-button>
        <el-button type="primary" @click="DeleteComment()">确认</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import { ref, watch, onMounted, inject } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import api from '@/api';
import { UserStore } from '@/stores/userInfoStore';
import { NewsStore } from '@/stores/newsInfoStore';
import { TipStore } from '@/stores/tipStore';

const disableCacheFor = inject('disableCacheFor') as (componentNameList: string[]) => void;
const router = useRouter();
const route = useRoute();
const userStoreObject = UserStore();
const newsStoreObject = NewsStore();
const TipStoreObject = TipStore();

const news = ref<any>(null); // 新闻详情
const relatedArticles = ref([]); //相关阅读
const comments = ref<any>([]); // 评论
const UserCommentQueryDTO = ref({
  newsId: route.query.NewsId,
  current: null,
  size: null,
})

// 定义返回上一页的函数
const goBack = () => {
  router.back(); // 使用更语义化的 router.back()
};
//  日期格式化1
function formatTimeAgo(timeStr) {
    // 将传入的时间字符串转换为 Date 对象
    const time = new Date(timeStr);
    // 获取当前时间
    const now = new Date();
    // 计算时间差（单位：毫秒）
    const diff = now.getTime() - time.getTime();

    // 将时间差转换为分钟、小时、天
    const minutes = Math.floor(diff / 1000 / 60);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);

    // 根据时间差返回对应的时间格式
    if (days > 7) {
        return "7天前";
    } else if (days > 0) {
        return `${days}天前`;
    } else if (hours > 0) {
        return `${hours}小时前`;
    } else if (minutes > 0) {
        return `${minutes}分钟前`;
    } else {
        return "刚刚";
    }
}
//  日期格式化2
const formatDate = (dateString) => {
    if (!dateString) return '未知';
    const date = new Date(dateString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 获取新闻分类名称
const getNewsCategoriesName = (Id) => {
    if (Id != null) {
        return newsStoreObject.newsCategoryInfo.find(ncInfo => ncInfo.id == Id)?.name;
    } else { return null }
};

//跳转相关阅读
const navigateToNewsDetails = (news) => {
    router.push({
        path: '/NewsDetails',
        query: { 
            NewsId: news.id,
            newsCategoryName: getNewsCategoriesName(news.categoryId),
        }
    });
};


//#region 新闻操作
const dialogOperateCommentVisible = ref(false)
const handleClickEllipsis = (comment)=>{
  dialogOperateCommentVisible.value = true
  tempCommentId.value = comment.id
}
//点赞新闻
async function likeNews(){
  if (userStoreObject.userInfo.id == null) { //用户未登录
    TipStoreObject.warningTip('请先登录');
    return;
  }
  await api.updateLikeNum(news.value.id, userStoreObject.userInfo.id).then((res:any) => {
    if (res.data.code == 1) {
      news.value.isLike = !news.value.isLike;
      if(news.value.isLike == true){ //由未点赞变成点赞
        news.value.likeNum += 1;
      }else{ //由点赞变成未点赞
        news.value.likeNum -= 1;
      }
    }else{
      alert('点赞失败，请稍后再试');
    }
  });
}
//收藏新闻
async function collectNews(){
  if (userStoreObject.userInfo.id == null) { //用户未登录
    TipStoreObject.warningTip('请先登录');
    return;
  }
  await api.updateFavoriteNum(news.value.id, userStoreObject.userInfo.id).then((res:any) => {
    if (res.data.code == 1) {
      news.value.isFavorite = !news.value.isFavorite;
      if(news.value.isFavorite == true){ //由未收藏变成收藏
        news.value.favoriteNum += 1;
      }else{ //由收藏变成未收藏
        news.value.favoriteNum -= 1;
      }
    }else{
      alert('点赞失败，请稍后再试');
    }
  });
}
//打开编辑评论对话框
const openEditCommentDialog = ()=>{
  if (userStoreObject.userInfo.id == null) { //用户未登录
    TipStoreObject.warningTip('请先登录');
    return;
  }
  dialogCommentVisible.value = true
}
//删除评论
const tempCommentId = ref(0)
const confirmDeleteCommentVisible = ref(false)
async function DeleteComment(){
  confirmDeleteCommentVisible.value = false
  dialogOperateCommentVisible.value = false
  console.log("要删除的评论id为:",tempCommentId.value)
  await api.deleteNewsComment(tempCommentId.value).then((res)=>{
    if(res.data.code == 1){
      TipStoreObject.successTip('删除成功')
      getUserCommentByNewsId()
    }else{
      TipStoreObject.errorTip('删除失败，请稍后再试')
    }
  }).catch((err)=>{
    TipStoreObject.errorTip('删除失败，请稍后再试')
  })

}

//提交评论
const dialogCommentVisible = ref(false)
const UserCommentAddDTO = ref({
  newsId: null,
  userId: null,
  content: null,
})
async function submitComment(){
  UserCommentAddDTO.value.newsId = news.value.id;
  UserCommentAddDTO.value.userId = userStoreObject.userInfo.id;

  console.log("要提交的评论为:",UserCommentAddDTO.value)

  await api.addNewsComment(UserCommentAddDTO.value).then((res:any) => {
    if (res.data.code == 1) {
      TipStoreObject.successTip("评论成功");
      dialogCommentVisible.value = false;
      UserCommentAddDTO.value.content = null
      getUserCommentByNewsId()
    }else{
      alert('评论失败，请稍后再试');
    }
  }).catch(err => {
    alert('评论失败，请稍后再试');
  })
  dialogCommentVisible.value = false
}

//#endregion



//获取新闻
const getNewsById = async()=>{
  await api.getNewsById(route.query.NewsId, userStoreObject.userInfo.id).then(res => {
    news.value = res.data.data[0];
  })
}

//获取新闻评论
const getUserCommentByNewsId = async()=>{
  await api.getUserCommentByNewsId(UserCommentQueryDTO.value.newsId, UserCommentQueryDTO.value.current, UserCommentQueryDTO.value.size).then(res => {
    comments.value = res.data.data;
  })
}

//修改浏览量 + 更新当前用户浏览历史
const updateViewNum = async()=>{
  if(userStoreObject.userInfo.id == null){
    return;
  }
  await api.updateViewNum(news.value.id, userStoreObject.userInfo.id).then(res => {
    if(res.data.code == 1){
      disableCacheFor(['Profile']) //刷新组件的挂载，因为数据更新了
    }
  })
}

//获取相关阅读
const getNewsByRelated = async()=>{
  await api.getNewsByRelated(news.value.categoryId, news.value.id).then(res => {
    relatedArticles.value = res.data.data
  })
}



// 监听路由参数变化（用于跳转相关阅读，因为本质上还是在这个路由页面）
watch(() => route.query.NewsId, async(newVal, oldVal) => {

  UserCommentQueryDTO.value.newsId = newVal

  // 重新加载数据
  getUserCommentByNewsId(); //获取新闻评论
  await getNewsById(); //获取新闻
  updateViewNum(); //修改浏览量
  getNewsByRelated()//相关阅读
})


onMounted(async() => {
  try{
    getUserCommentByNewsId(); //获取新闻评论
    await getNewsById(); //获取新闻
    updateViewNum(); //修改浏览量
    getNewsByRelated()//相关阅读

  } catch (error) {
    TipStoreObject.errorTip('未知错误')
  }
  
});

</script>


<style lang="scss" scoped>
.article-header {
  position: relative;

}

.article-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  // background: #60a5fa
  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
}

.article-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  padding: 20px 16px;
  box-sizing: border-box;
}

.article-title {
  color: white;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.3;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.article-content {
  padding-top: 10px;
  padding-right: 5px;
  padding-left: 5px;
}

.article-paragraph {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #333;
}

.article-image {
  width: 100%;
  border-radius: 8px;
  margin: 16px 0;
}

.article-caption {
  font-size: 14px;
  color: #8e8e93;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 16px;
}

.article-actions {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  // padding-bottom: 0px;
  border-top: 1px solid #eaeaea;
  background-color: #fff;
  position: sticky;
  bottom: -1px;
}

.article-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #8e8e93;
}

.article-action-icon {
  font-size: 24px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.article-action-text {
  font-size: 12px;
}

.article-related {
  padding: 16px;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  background-color: #fff;
}

.article-related-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.list-item-content {
  flex: 1;
  margin-right: 16px;
}

.list-item-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}

.list-item-subtitle {
  color: #8e8e93;
  font-size: 14px;
}

.article-comments {
  padding: 16px 16px 28px 16px;
  background-color: #fff;
  margin-top: 16px;
}

.article-comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.article-comments-title {
  font-size: 18px;
  font-weight: 600;
}

.article-comments-count {
  color: #8e8e93;
  font-size: 14px;
}

.article-comment {
  display: flex;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eaeaea;
}

// .article-comment:last-child {
//   border-bottom: none;
//   margin-bottom: 0;
//   padding-bottom: 0;
// }

.article-comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-right: 12px;
}

.article-comment-content {
  flex: 1;
}

.article-comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.article-comment-name {
  font-weight: 600;
  font-size: 14px;
}

.article-comment-time {
  color: #8e8e93;
  font-size: 12px;
}

.article-comment-text {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
  max-width: 100%;
  /* 确保文本框的最大宽度不超过其父容器 */
  word-wrap: break-word;
  /* 确保长单词或 URL 在必要时换行 */
  min-height: auto;
}

.article-comment-actions {
  display: flex;
  gap: 16px;
}

.article-comment-action {
  display: flex;
  align-items: center;
  color: #8e8e93;
  font-size: 12px;
}

.article-comment-action i {
  margin-right: 4px;
}

.nav-bar {
  background-color: transparent;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  z-index: 10;
  border-bottom: none;
  display: flex;
  /* 使用 flex 布局 */
  justify-content: space-between;
  /* 将内容分布到两端 */
  align-items: center;
  /* 垂直居中对齐 */
  padding: 5px 16px 16px;
  /* 添加内边距 */
}

.nav-left a,
.nav-actions a {
  color: white;
  font-size: 18px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-actions {
  display: flex;
  /* 使用 flex 布局 */
  align-items: center;
  /* 垂直居中对齐 */
}
</style>